<template>
  <div class="p-10">
    <div style="margin: 10px auto; width: 1200px;">
      <el-carousel height="550px" :interval="10000">
        <el-carousel-item v-for="item in imgs" :key="item">
          <img :src="item" alt="" style="width: 100%; height: 100%">
        </el-carousel-item>
      </el-carousel>
    </div>

    <div style="color: #a04c3b; font-weight: bold; font-size: 24px; ">推荐</div>
    <div style="">
      <el-row :gutter="10" style="min-height: 280px">
        <el-col :span="6" v-for="item in tableData" :key="item.id" style="margin-bottom: 10px">
          <div style="background-color: white; padding: 10px; cursor: pointer" @click="$router.push('/front/itemDetail?id=' + item.id)">
            <img :src="item.img" alt="" style="width: 100%; height: 200px; overflow: hidden; border-radius: 10px">
            <div style="color: #666; margin: 10px 0;font-weight: bold;font-size: 15px;text-align: center" class="line1">{{ item.name }}</div>
          </div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
export default {
  name: "FrontHome",
  data() {
    return {
      imgs: [
        require('../../assets/bg.jpeg'),
        require('../../assets/bg.jpg'),
      ],
      files: [],
      tableData: [],
    }
  },
  created() {
    this.$request.get("/item/recommend").then(res => {
      this.tableData = res.data
    })
  },
  methods: {

  }
}
</script>

<style>

</style>
